import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import styles from "./index.module.less";

const detailData = {
  1: {
    id: 1,
    title: "新闻标题11111",
    date: "2024-05-30 11:01:00",
    content: "新闻内容11111",
  },
  2: {
    id: 2,
    title: "新闻标题22222",
    date: "2024-05-30 12:02:00",
    content: "新闻内容22222",
  },
  3: {
    id: 3,
    title: "新闻标题33333",
    date: "2024-05-30 13:03:00",
    content: "新闻内容33333",
  },
};

const Detail = () => {
  const { id } = useParams();
  const [detail, setDetail] = useState(null);

  useEffect(() => {
    setDetail(detailData[id] || null);
  }, [id]);

  return (
    <div>
      {detail ? (
        <div className={styles.container}>
          <div className={styles.title}>{detail.title}</div>
          <div className={styles.date}>{detail.date}</div>
          <div className={styles.content}>{detail.content}</div>
        </div>
      ) : (
        <div>新闻不存在</div>
      )}
    </div>
  );
};

export default Detail;
